<template>
  <a-modal :visible="visible" :closable="false" :width="widthNum" :footer="null" centered>
    <template slot="icon">

            </template>
    <div style="text-align: center;">
      <img style="width: 52px;height: 52px;margin-top: 4px;" src="../../assets/img/success.png" alt="">
    </div>
    <div class="titles_modal">{{title_modal}}</div>
    <div class="contents_modal">{{contents_modal}}</div>
    <div v-if="steps">
      <div style="padding:24px 45px 6px">
        <a-steps>
          <a-step status="finish">
            <template slot="icon">
              <i style="font-size:20px;" class="iconfont icon-a-1-ruku"></i>
            </template>
          </a-step>
          <a-step :status="outCar?'finish':'wait'">
            <template slot="icon">
              <i style="font-size:20px;" class="iconfont icon-a-2-chuku"></i>
            </template>
          </a-step>
          <a-step :status="outCar?'finish':'wait'">
            <template slot="icon">
              <i style="font-size:20px;" class="iconfont icon-a-4-wancheng"></i>
            </template>
          </a-step>
        </a-steps>
      </div>
      <div style="padding:0 12px 0 0" >
        <div class="flex_between">
          <div class="steps_title">提交出库单</div>
          <div :class="outCar?'steps_title':'steps_title_gray'">车辆出库</div>
          <div :class="outCar?'steps_title':'steps_title_gray'">车行签收</div>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top:24px;margin-bottom:4px;">
      <a-button @click="clickLeft" class="xian_btn">{{leftBtnName}}</a-button>
      <a-button @click="clickRight" style="margin-left:20px;" type="primary">{{rightBtnName}}</a-button>
    </div>
  </a-modal>
</template>
<script>

export default {

  props: {
    widthNum: { type: Number, default: 400 },
    steps: { type: Boolean, default: false },
    title_modal: { type: String, default: '成功' },
    contents_modal: { type: String, default: '提示文字' },
    outCar: { type: Boolean, default: false },
    leftBtnName: { type: String, default: '返回列表' },
    rightBtnName: { type: String, default: '查看详情' }

  },
  data () {
    return {
      visible: false,
      params: {}

    }
  },
  methods: {
    clickLeft () {
      this.visible = false
      this.$emit('clickLeft')
    },
    clickRight () {
      this.visible = false
      this.$emit('clickRight')
    },
    onInitial (id) {
      this.visible = true
    }

  },
  mounted () { }
}
</script>
<style lang="less" scoped>
.titles_modal {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  line-height: 24px;
  margin-top: 24px;
}

.contents_modal {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #606266;
  line-height: 20px;
  margin-top: 12px;

}

.steps_title {
  height: 22px;
  width: 100px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  line-height: 22px;
}

.steps_title_gray {
  height: 22px;
  font-size: 14px;
  font-weight: 500;
  width: 100px;
  text-align: center;
  color: #999999;
  line-height: 22px;

}
</style>
